﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
    <title>学生考勤</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, loginIn-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <script type="text/javascript" src="../../js/jquery-2.1.0.min.js"></script>
    <script src="https://unpkg.com/p5@0.7.2/lib/p5.min.js"></script>
    <script src="https://unpkg.com/p5@0.7.2/lib/addons/p5.dom.min.js"></script>
    <link rel="stylesheet" href="../../css/layui.css" media="all">

</head>
<body>

<!--人脸识别-->
<div align="center"  id="renlian">

    <canvas id="myCanvas" width="475" height="315" style="border:solid black;z-index: 1;position: absolute" >
        <!--<video id="video" width="480" height="320" controls></video>-->
    </canvas>
    <video id="video" width="480" height="320" controls>
    </video>
    <form method="post" action="/attendance/addAttendance">
        <div>
            <!--<button id="capture" >考勤</button>-->
            <div class="layui-form-item" style="margin-top: 20px;margin-left: 770px">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1"  style="float: left"  id="capture"><a>考勤</a></button>
                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1"  style="float: left" ><a target="myFrameName" href="/attendance/hou" onclick="chang()">缺勤</a></button>
                    <input type="hidden" id="msg" th:value="${message}" >
                    <!--<br>
                    <h3 id="message" style="text-align: center;color: green" th:text="${message}"></h3>-->
                </div>
            </div>
            <img id="photo" alt="photo"  style="width: 480px;height: 320px;display: none">
            <input type="text" id="base64" style="display: none" name="base64Data" >
            <input style="display: none" id="publicIP" name="publicIP">
        </div>
        <canvas id="canvas" width="480" height="320" style="display: none"></canvas>
    </form>
</div>

<script>
    //访问用户媒体设备的兼容方法
    function getUserMedia(constraints, success, error) {
        if (navigator.mediaDevices.getUserMedia) {
            //最新的标准API
            navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
        } else if (navigator.webkitGetUserMedia) {
            //webkit核心浏览器
            navigator.webkitGetUserMedia(constraints, success, error)
        } else if (navigator.mozGetUserMedia) {
            //firfox浏览器
            navigator.mozGetUserMedia(constraints, success, error);
        } else if (navigator.getUserMedia) {
            //旧版API
            navigator.getUserMedia(constraints, success, error);
        }
    }

    let video = document.getElementById('video');
    let canvas = document.getElementById('canvas');
    let context = canvas.getContext('2d');
    context.fillStyle="#FF0000";
    context.fillRect(0,0,150,75);

    function success(stream) {
        //兼容webkit核心浏览器
        let CompatibleURL = window.URL || window.webkitURL;
        //将视频流设置为video元素的源
        console.log(stream);

        //video.src = CompatibleURL.createObjectURL(stream);
        video.srcObject = stream;
        video.play();
    }

    function error(error) {
        console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
    }

    if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
        //调用用户媒体设备, 访问摄像头
        getUserMedia({
            video: {
                width: 480,
                height: 320
            }
        }, success, error);
    } else {
        alert('不支持访问用户媒体');
    }

    document.getElementById('capture').addEventListener('click', function () {
        //context.drawImage(video, 0, 0, 480, 320);
        //let imgData = canvas.toDataURL('image/webp');
        let canvas = document.getElementById('canvas');
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        canvas.getContext('2d').drawImage(video, 0, 0);
        let imgData = canvas.toDataURL('image/webp');
        document.getElementById('photo').setAttribute('src', imgData);
        let base64Data = imgData.substr(23);
        //console.log("base64Data--->");
        //console.log(base64Data);
        document.getElementById('base64').value = base64Data; //赋值

    });

    /* video.addEventListener('play', () => {
         console.log('play lisetner');
         canvas = faceapi.createCanvasFromMedia(video);
         document.body.append(canvas);
         faceapi.matchDimensions(canvas, displaySize);
         takePhoto();
         setInterval(takePhoto,1000);
     });
 */
    async function takePhoto(){
        if (!faceapiReady) {
            return;
        }
        let detections = await detect();
        draw(detections);
    }

    /*  async function detect() {
          // const options = new faceapi.TinyFaceDetectorOptions({ scoreThreshold: 0.2, inputSize: 608 });
          const options = new faceapi.SsdMobilenetv1Options({ minConfidence: 0.5, maxResults: 3 });
          const detections = await faceapi.detectAllFaces(video, options).withFaceLandmarks();
          return detections;
      }*/

    /*function draw(detections) {
        const resizedDetections = faceapi.resizeResults(detections, displaySize);
        canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
        faceapi.draw.drawDetections(canvas, resizedDetections);
        faceapi.draw.drawFaceLandmarks(canvas, resizedDetections);
    }*/
    setInterval(faceshow,500);
    var x = 240;
    var y = 160;
    var width = 0;
    var high = 0;
    var endx = 0;
    var endy = 0;
    var endw = 0;
    var endh = 0;
    var mycanvas = document.getElementById('myCanvas').getContext('2d');
    function lerp(min, max, fraction) {
        return (max - min) * fraction + min;
    }
    function faceshow() {

        let canvas = document.getElementById('canvas');
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        canvas.getContext('2d').drawImage(video, 0, 0);
        let imgData = canvas.toDataURL('image/webp');
        document.getElementById('photo').setAttribute('src', imgData);
        let base64Data = imgData.substr(23);
        /*console.log("base64Data--->");
        console.log(base64Data);*/
        /* document.getElementById('base64').value = base64Data; //赋值*/
        $.ajax({
            url: "/attendance/facedelete",
            type: "POST",
            async: false,
            dataType: "json",
            data: {"base64Data": base64Data},
            success: function (data) {
                if (data.dd == null || data.dd.length == 0){

                }else {
                    endx = data.dd[0];
                    endy = data.dd[1];
                    endw = data.dd[2];
                    endh = data.dd[3];
                }
                /* console.log("endx:"+endx);
                 console.log("endy"+endy);
                 console.log("endw"+endw);
                 console.log("endh"+endh);*/
                update();
            },
            error: function () {
                /*window.location.href = "../yang/;*/
            },
        });

        /*mycanvas.clearRect(0, 0, canvas.width, canvas.height);

        /!*mycanvas.fillStyle="#FF0000";*!/
        mycanvas.strokeStyle="#FF0000"
        mycanvas.strokeRect(10,10,150,75);
        /!*mycanvas.clearRect(10,10,150,75);*!/*/
    }
    function update() {
        /*console.log("x:"+x);
        console.log("y:"+y);
        console.log("width:"+width);
        console.log("high:"+high);*/

        if (endx==endy&&width==high&&endx==width&&endx==0){
            mycanvas.clearRect(0, 0, canvas.width, canvas.height);
        }else {
            /*var mycanvas = document.getElementById('myCanvas').getContext('2d');*/
            mycanvas.clearRect(0, 0, canvas.width, canvas.height);
            /*mycanvas.fillStyle="#FF0000";*/
            mycanvas.strokeStyle="#FF0000";
            /*mycanvas.strokeRect(data.dd[0],data.dd[1],data.dd[2],data.dd[3]);*/
            mycanvas.strokeRect(x,y,width,high);
            x = lerp(x,endx,0.1);
            y = lerp(y,endy,0.1);
            width = lerp(width,endw,0.1);
            high = lerp(high,endh,0.1);
            requestAnimationFrame(update);
        }
    }
    /*window.onload = function(){
        var publicIP = document.getElementById("publicIP");
        publicIP.value = returnCitySN["cip"];
        /!*console.log(returnCitySN);
        console.log("returnCitySN[\"cip\"]:"+returnCitySN["cip"]);*!/
    }*/

   /* onload=function(){
        console.log("msg--------------");
        var msg =  $("#msg").val();
        console.log("msg--------------"+msg);
        if (msg){
            alert(msg);
        }

    };*/
</script>
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<script>
    onload=function() {
        var publicIP = document.getElementById("publicIP");
        publicIP.value = returnCitySN["cip"];
        //console.log(returnCitySN["cip"] + ',' + returnCitySN["cname"]);
        //console.log("msg--------------");
        var msg =  $("#msg").val();
        //console.log("msg--------------"+msg);
        if (msg){
            alert(msg);
        }
    }
</script>

</body>
</html>